<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4412427" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">logout</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">恢复</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100c2;</span>
                <div class="name">workchat</div>
                <div class="code-name">&amp;#x100c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">progress</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">zip</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b0;</span>
                <div class="name">gz</div>
                <div class="code-name">&amp;#xe8b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">tar</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">bz2</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">chat</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">aiassistant</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe780;</span>
                <div class="name">aichat</div>
                <div class="code-name">&amp;#xe780;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">aitrans</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">aiknow</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78c;</span>
                <div class="name">airecording</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">aispoken</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">aisetting</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">aidown</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100c1;</span>
                <div class="name">aicreation</div>
                <div class="code-name">&amp;#x100c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">aisd</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ac;</span>
                <div class="name">mp4</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">mp3</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">url</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">question</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">account</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe756;</span>
                <div class="name">language</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">system</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">personal</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">image</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe758;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">java</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">tsx</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80a;</span>
                <div class="name">py</div>
                <div class="code-name">&amp;#xe80a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">vue</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">tiff</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">bmp</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">bb</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">html</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">css</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">xml文件</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">flow</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">unknow</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">js</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">json</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">doc</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">txt</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">docx</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">disk</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">disket</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">pdf</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">notices</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeda9;</span>
                <div class="name">wifi</div>
                <div class="code-name">&amp;#xeda9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe996;</span>
                <div class="name">battery</div>
                <div class="code-name">&amp;#xe996;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">ink</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">calculator</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">todo</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">gant</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">draw</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99b;</span>
                <div class="name">music</div>
                <div class="code-name">&amp;#xe99b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">brower</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">calendar</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">gallery</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">terminal</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">noteapp</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">note</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">editorapp</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">kanban</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">mindext</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">kb</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">backup</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">computer</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">computer2</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">unknow</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">picedit</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">psd</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">photo</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">noteexe</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">markdown</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">jpg</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">gif</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">png</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">svg</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">ttf</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">webp</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">md</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">word</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">pptexe</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">pptx</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">note</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">xlsx</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">excel</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">xls</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">ppt</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">store</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">mind</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe764;</span>
                <div class="name">mindexe</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">setup</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe898;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe898;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">favorite</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">cut</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">baiban</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">notice</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea06;</span>
                <div class="name">windows</div>
                <div class="code-name">&amp;#xea06;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1733206776617') format('woff2'),
       url('iconfont.woff?t=1733206776617') format('woff'),
       url('iconfont.ttf?t=1733206776617') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qq"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.icon-qq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-logout"></span>
            <div class="name">
              logout
            </div>
            <div class="code-name">.icon-logout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huifu"></span>
            <div class="name">
              恢复
            </div>
            <div class="code-name">.icon-huifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-workchat"></span>
            <div class="name">
              workchat
            </div>
            <div class="code-name">.icon-workchat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-progress"></span>
            <div class="name">
              progress
            </div>
            <div class="code-name">.icon-progress
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zip"></span>
            <div class="name">
              zip
            </div>
            <div class="code-name">.icon-zip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gz"></span>
            <div class="name">
              gz
            </div>
            <div class="code-name">.icon-gz
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tar"></span>
            <div class="name">
              tar
            </div>
            <div class="code-name">.icon-tar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bz2"></span>
            <div class="name">
              bz2
            </div>
            <div class="code-name">.icon-bz2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat"></span>
            <div class="name">
              chat
            </div>
            <div class="code-name">.icon-chat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aiassistant"></span>
            <div class="name">
              aiassistant
            </div>
            <div class="code-name">.icon-aiassistant
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aichat"></span>
            <div class="name">
              aichat
            </div>
            <div class="code-name">.icon-aichat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aitrans"></span>
            <div class="name">
              aitrans
            </div>
            <div class="code-name">.icon-aitrans
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aiknow"></span>
            <div class="name">
              aiknow
            </div>
            <div class="code-name">.icon-aiknow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-airecording"></span>
            <div class="name">
              airecording
            </div>
            <div class="code-name">.icon-airecording
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aispoken"></span>
            <div class="name">
              aispoken
            </div>
            <div class="code-name">.icon-aispoken
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aisetting"></span>
            <div class="name">
              aisetting
            </div>
            <div class="code-name">.icon-aisetting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aidown"></span>
            <div class="name">
              aidown
            </div>
            <div class="code-name">.icon-aidown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aicreation"></span>
            <div class="name">
              aicreation
            </div>
            <div class="code-name">.icon-aicreation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aisd"></span>
            <div class="name">
              aisd
            </div>
            <div class="code-name">.icon-aisd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mp4"></span>
            <div class="name">
              mp4
            </div>
            <div class="code-name">.icon-mp4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mp3"></span>
            <div class="name">
              mp3
            </div>
            <div class="code-name">.icon-mp3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-url"></span>
            <div class="name">
              url
            </div>
            <div class="code-name">.icon-url
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.icon-error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question"></span>
            <div class="name">
              question
            </div>
            <div class="code-name">.icon-question
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.icon-warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-account"></span>
            <div class="name">
              account
            </div>
            <div class="code-name">.icon-account
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-language"></span>
            <div class="name">
              language
            </div>
            <div class="code-name">.icon-language
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-system"></span>
            <div class="name">
              system
            </div>
            <div class="code-name">.icon-system
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-personal"></span>
            <div class="name">
              personal
            </div>
            <div class="code-name">.icon-personal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-image"></span>
            <div class="name">
              image
            </div>
            <div class="code-name">.icon-image
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.icon-video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-java"></span>
            <div class="name">
              java
            </div>
            <div class="code-name">.icon-java
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tsx"></span>
            <div class="name">
              tsx
            </div>
            <div class="code-name">.icon-tsx
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-py"></span>
            <div class="name">
              py
            </div>
            <div class="code-name">.icon-py
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vue"></span>
            <div class="name">
              vue
            </div>
            <div class="code-name">.icon-vue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tiff"></span>
            <div class="name">
              tiff
            </div>
            <div class="code-name">.icon-tiff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bmp"></span>
            <div class="name">
              bmp
            </div>
            <div class="code-name">.icon-bmp
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bb"></span>
            <div class="name">
              bb
            </div>
            <div class="code-name">.icon-bb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-html"></span>
            <div class="name">
              html
            </div>
            <div class="code-name">.icon-html
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-css"></span>
            <div class="name">
              css
            </div>
            <div class="code-name">.icon-css
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xmlwenjian"></span>
            <div class="name">
              xml文件
            </div>
            <div class="code-name">.icon-xmlwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flow"></span>
            <div class="name">
              flow
            </div>
            <div class="code-name">.icon-flow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unknow1"></span>
            <div class="name">
              unknow
            </div>
            <div class="code-name">.icon-unknow1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-js"></span>
            <div class="name">
              js
            </div>
            <div class="code-name">.icon-js
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-json"></span>
            <div class="name">
              json
            </div>
            <div class="code-name">.icon-json
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-doc"></span>
            <div class="name">
              doc
            </div>
            <div class="code-name">.icon-doc
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-txt"></span>
            <div class="name">
              txt
            </div>
            <div class="code-name">.icon-txt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-docx"></span>
            <div class="name">
              docx
            </div>
            <div class="code-name">.icon-docx
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-disk"></span>
            <div class="name">
              disk
            </div>
            <div class="code-name">.icon-disk
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-disknet"></span>
            <div class="name">
              disket
            </div>
            <div class="code-name">.icon-disknet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pdf"></span>
            <div class="name">
              pdf
            </div>
            <div class="code-name">.icon-pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-notices"></span>
            <div class="name">
              notices
            </div>
            <div class="code-name">.icon-notices
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wifi"></span>
            <div class="name">
              wifi
            </div>
            <div class="code-name">.icon-wifi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-battery"></span>
            <div class="name">
              battery
            </div>
            <div class="code-name">.icon-battery
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ink"></span>
            <div class="name">
              ink
            </div>
            <div class="code-name">.icon-ink
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calculator"></span>
            <div class="name">
              calculator
            </div>
            <div class="code-name">.icon-calculator
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-todo"></span>
            <div class="name">
              todo
            </div>
            <div class="code-name">.icon-todo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gant"></span>
            <div class="name">
              gant
            </div>
            <div class="code-name">.icon-gant
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-draw"></span>
            <div class="name">
              draw
            </div>
            <div class="code-name">.icon-draw
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-music"></span>
            <div class="name">
              music
            </div>
            <div class="code-name">.icon-music
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-brower"></span>
            <div class="name">
              brower
            </div>
            <div class="code-name">.icon-brower
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">.icon-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gallery"></span>
            <div class="name">
              gallery
            </div>
            <div class="code-name">.icon-gallery
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-terminal"></span>
            <div class="name">
              terminal
            </div>
            <div class="code-name">.icon-terminal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-noteapp"></span>
            <div class="name">
              noteapp
            </div>
            <div class="code-name">.icon-noteapp
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biji"></span>
            <div class="name">
              note
            </div>
            <div class="code-name">.icon-biji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editorbt"></span>
            <div class="name">
              editorapp
            </div>
            <div class="code-name">.icon-editorbt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kanban"></span>
            <div class="name">
              kanban
            </div>
            <div class="code-name">.icon-kanban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mindext"></span>
            <div class="name">
              mindext
            </div>
            <div class="code-name">.icon-mindext
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kb"></span>
            <div class="name">
              kb
            </div>
            <div class="code-name">.icon-kb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-backup"></span>
            <div class="name">
              backup
            </div>
            <div class="code-name">.icon-backup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diannao"></span>
            <div class="name">
              computer
            </div>
            <div class="code-name">.icon-diannao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-computer2"></span>
            <div class="name">
              computer2
            </div>
            <div class="code-name">.icon-computer2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unknow"></span>
            <div class="name">
              unknow
            </div>
            <div class="code-name">.icon-unknow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picedit"></span>
            <div class="name">
              picedit
            </div>
            <div class="code-name">.icon-picedit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-psd"></span>
            <div class="name">
              psd
            </div>
            <div class="code-name">.icon-psd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-photo"></span>
            <div class="name">
              photo
            </div>
            <div class="code-name">.icon-photo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-noteexe"></span>
            <div class="name">
              noteexe
            </div>
            <div class="code-name">.icon-noteexe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-markdown"></span>
            <div class="name">
              markdown
            </div>
            <div class="code-name">.icon-markdown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jpg"></span>
            <div class="name">
              jpg
            </div>
            <div class="code-name">.icon-jpg
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gif"></span>
            <div class="name">
              gif
            </div>
            <div class="code-name">.icon-gif
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-png"></span>
            <div class="name">
              png
            </div>
            <div class="code-name">.icon-png
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-svg"></span>
            <div class="name">
              svg
            </div>
            <div class="code-name">.icon-svg
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ttf"></span>
            <div class="name">
              ttf
            </div>
            <div class="code-name">.icon-ttf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-webp"></span>
            <div class="name">
              webp
            </div>
            <div class="code-name">.icon-webp
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-md"></span>
            <div class="name">
              md
            </div>
            <div class="code-name">.icon-md
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-word"></span>
            <div class="name">
              word
            </div>
            <div class="code-name">.icon-word
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pptexe"></span>
            <div class="name">
              pptexe
            </div>
            <div class="code-name">.icon-pptexe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pptx"></span>
            <div class="name">
              pptx
            </div>
            <div class="code-name">.icon-pptx
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-note"></span>
            <div class="name">
              note
            </div>
            <div class="code-name">.icon-note
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xlsx"></span>
            <div class="name">
              xlsx
            </div>
            <div class="code-name">.icon-xlsx
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-excel"></span>
            <div class="name">
              excel
            </div>
            <div class="code-name">.icon-excel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xls1"></span>
            <div class="name">
              xls
            </div>
            <div class="code-name">.icon-xls1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ppt"></span>
            <div class="name">
              ppt
            </div>
            <div class="code-name">.icon-ppt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-store"></span>
            <div class="name">
              store
            </div>
            <div class="code-name">.icon-store
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mind"></span>
            <div class="name">
              mind
            </div>
            <div class="code-name">.icon-mind
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mindexe"></span>
            <div class="name">
              mindexe
            </div>
            <div class="code-name">.icon-mindexe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setup"></span>
            <div class="name">
              setup
            </div>
            <div class="code-name">.icon-setup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.icon-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favorite"></span>
            <div class="name">
              favorite
            </div>
            <div class="code-name">.icon-favorite
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cut"></span>
            <div class="name">
              cut
            </div>
            <div class="code-name">.icon-cut
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baiban"></span>
            <div class="name">
              baiban
            </div>
            <div class="code-name">.icon-baiban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-notice"></span>
            <div class="name">
              notice
            </div>
            <div class="code-name">.icon-notice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-windows"></span>
            <div class="name">
              windows
            </div>
            <div class="code-name">.icon-windows
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qq"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#icon-qq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout"></use>
                </svg>
                <div class="name">logout</div>
                <div class="code-name">#icon-logout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huifu"></use>
                </svg>
                <div class="name">恢复</div>
                <div class="code-name">#icon-huifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-workchat"></use>
                </svg>
                <div class="name">workchat</div>
                <div class="code-name">#icon-workchat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-progress"></use>
                </svg>
                <div class="name">progress</div>
                <div class="code-name">#icon-progress</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zip"></use>
                </svg>
                <div class="name">zip</div>
                <div class="code-name">#icon-zip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gz"></use>
                </svg>
                <div class="name">gz</div>
                <div class="code-name">#icon-gz</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tar"></use>
                </svg>
                <div class="name">tar</div>
                <div class="code-name">#icon-tar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bz2"></use>
                </svg>
                <div class="name">bz2</div>
                <div class="code-name">#icon-bz2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat"></use>
                </svg>
                <div class="name">chat</div>
                <div class="code-name">#icon-chat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aiassistant"></use>
                </svg>
                <div class="name">aiassistant</div>
                <div class="code-name">#icon-aiassistant</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aichat"></use>
                </svg>
                <div class="name">aichat</div>
                <div class="code-name">#icon-aichat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aitrans"></use>
                </svg>
                <div class="name">aitrans</div>
                <div class="code-name">#icon-aitrans</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aiknow"></use>
                </svg>
                <div class="name">aiknow</div>
                <div class="code-name">#icon-aiknow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-airecording"></use>
                </svg>
                <div class="name">airecording</div>
                <div class="code-name">#icon-airecording</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aispoken"></use>
                </svg>
                <div class="name">aispoken</div>
                <div class="code-name">#icon-aispoken</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aisetting"></use>
                </svg>
                <div class="name">aisetting</div>
                <div class="code-name">#icon-aisetting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aidown"></use>
                </svg>
                <div class="name">aidown</div>
                <div class="code-name">#icon-aidown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aicreation"></use>
                </svg>
                <div class="name">aicreation</div>
                <div class="code-name">#icon-aicreation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aisd"></use>
                </svg>
                <div class="name">aisd</div>
                <div class="code-name">#icon-aisd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mp4"></use>
                </svg>
                <div class="name">mp4</div>
                <div class="code-name">#icon-mp4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mp3"></use>
                </svg>
                <div class="name">mp3</div>
                <div class="code-name">#icon-mp3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#icon-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-url"></use>
                </svg>
                <div class="name">url</div>
                <div class="code-name">#icon-url</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#icon-error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question"></use>
                </svg>
                <div class="name">question</div>
                <div class="code-name">#icon-question</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#icon-warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-account"></use>
                </svg>
                <div class="name">account</div>
                <div class="code-name">#icon-account</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-language"></use>
                </svg>
                <div class="name">language</div>
                <div class="code-name">#icon-language</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-system"></use>
                </svg>
                <div class="name">system</div>
                <div class="code-name">#icon-system</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-personal"></use>
                </svg>
                <div class="name">personal</div>
                <div class="code-name">#icon-personal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-image"></use>
                </svg>
                <div class="name">image</div>
                <div class="code-name">#icon-image</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#icon-video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-java"></use>
                </svg>
                <div class="name">java</div>
                <div class="code-name">#icon-java</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tsx"></use>
                </svg>
                <div class="name">tsx</div>
                <div class="code-name">#icon-tsx</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-py"></use>
                </svg>
                <div class="name">py</div>
                <div class="code-name">#icon-py</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vue"></use>
                </svg>
                <div class="name">vue</div>
                <div class="code-name">#icon-vue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiff"></use>
                </svg>
                <div class="name">tiff</div>
                <div class="code-name">#icon-tiff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bmp"></use>
                </svg>
                <div class="name">bmp</div>
                <div class="code-name">#icon-bmp</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bb"></use>
                </svg>
                <div class="name">bb</div>
                <div class="code-name">#icon-bb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-html"></use>
                </svg>
                <div class="name">html</div>
                <div class="code-name">#icon-html</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-css"></use>
                </svg>
                <div class="name">css</div>
                <div class="code-name">#icon-css</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xmlwenjian"></use>
                </svg>
                <div class="name">xml文件</div>
                <div class="code-name">#icon-xmlwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flow"></use>
                </svg>
                <div class="name">flow</div>
                <div class="code-name">#icon-flow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unknow1"></use>
                </svg>
                <div class="name">unknow</div>
                <div class="code-name">#icon-unknow1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-js"></use>
                </svg>
                <div class="name">js</div>
                <div class="code-name">#icon-js</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-json"></use>
                </svg>
                <div class="name">json</div>
                <div class="code-name">#icon-json</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-doc"></use>
                </svg>
                <div class="name">doc</div>
                <div class="code-name">#icon-doc</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-txt"></use>
                </svg>
                <div class="name">txt</div>
                <div class="code-name">#icon-txt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-docx"></use>
                </svg>
                <div class="name">docx</div>
                <div class="code-name">#icon-docx</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-disk"></use>
                </svg>
                <div class="name">disk</div>
                <div class="code-name">#icon-disk</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-disknet"></use>
                </svg>
                <div class="name">disket</div>
                <div class="code-name">#icon-disknet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pdf"></use>
                </svg>
                <div class="name">pdf</div>
                <div class="code-name">#icon-pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notices"></use>
                </svg>
                <div class="name">notices</div>
                <div class="code-name">#icon-notices</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wifi"></use>
                </svg>
                <div class="name">wifi</div>
                <div class="code-name">#icon-wifi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-battery"></use>
                </svg>
                <div class="name">battery</div>
                <div class="code-name">#icon-battery</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ink"></use>
                </svg>
                <div class="name">ink</div>
                <div class="code-name">#icon-ink</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calculator"></use>
                </svg>
                <div class="name">calculator</div>
                <div class="code-name">#icon-calculator</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-todo"></use>
                </svg>
                <div class="name">todo</div>
                <div class="code-name">#icon-todo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gant"></use>
                </svg>
                <div class="name">gant</div>
                <div class="code-name">#icon-gant</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-draw"></use>
                </svg>
                <div class="name">draw</div>
                <div class="code-name">#icon-draw</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-music"></use>
                </svg>
                <div class="name">music</div>
                <div class="code-name">#icon-music</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brower"></use>
                </svg>
                <div class="name">brower</div>
                <div class="code-name">#icon-brower</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar"></use>
                </svg>
                <div class="name">calendar</div>
                <div class="code-name">#icon-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gallery"></use>
                </svg>
                <div class="name">gallery</div>
                <div class="code-name">#icon-gallery</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-terminal"></use>
                </svg>
                <div class="name">terminal</div>
                <div class="code-name">#icon-terminal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-noteapp"></use>
                </svg>
                <div class="name">noteapp</div>
                <div class="code-name">#icon-noteapp</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biji"></use>
                </svg>
                <div class="name">note</div>
                <div class="code-name">#icon-biji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editorbt"></use>
                </svg>
                <div class="name">editorapp</div>
                <div class="code-name">#icon-editorbt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kanban"></use>
                </svg>
                <div class="name">kanban</div>
                <div class="code-name">#icon-kanban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mindext"></use>
                </svg>
                <div class="name">mindext</div>
                <div class="code-name">#icon-mindext</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kb"></use>
                </svg>
                <div class="name">kb</div>
                <div class="code-name">#icon-kb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-backup"></use>
                </svg>
                <div class="name">backup</div>
                <div class="code-name">#icon-backup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diannao"></use>
                </svg>
                <div class="name">computer</div>
                <div class="code-name">#icon-diannao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-computer2"></use>
                </svg>
                <div class="name">computer2</div>
                <div class="code-name">#icon-computer2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unknow"></use>
                </svg>
                <div class="name">unknow</div>
                <div class="code-name">#icon-unknow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picedit"></use>
                </svg>
                <div class="name">picedit</div>
                <div class="code-name">#icon-picedit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-psd"></use>
                </svg>
                <div class="name">psd</div>
                <div class="code-name">#icon-psd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-photo"></use>
                </svg>
                <div class="name">photo</div>
                <div class="code-name">#icon-photo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-noteexe"></use>
                </svg>
                <div class="name">noteexe</div>
                <div class="code-name">#icon-noteexe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-markdown"></use>
                </svg>
                <div class="name">markdown</div>
                <div class="code-name">#icon-markdown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jpg"></use>
                </svg>
                <div class="name">jpg</div>
                <div class="code-name">#icon-jpg</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gif"></use>
                </svg>
                <div class="name">gif</div>
                <div class="code-name">#icon-gif</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-png"></use>
                </svg>
                <div class="name">png</div>
                <div class="code-name">#icon-png</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-svg"></use>
                </svg>
                <div class="name">svg</div>
                <div class="code-name">#icon-svg</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ttf"></use>
                </svg>
                <div class="name">ttf</div>
                <div class="code-name">#icon-ttf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-webp"></use>
                </svg>
                <div class="name">webp</div>
                <div class="code-name">#icon-webp</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-md"></use>
                </svg>
                <div class="name">md</div>
                <div class="code-name">#icon-md</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-word"></use>
                </svg>
                <div class="name">word</div>
                <div class="code-name">#icon-word</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pptexe"></use>
                </svg>
                <div class="name">pptexe</div>
                <div class="code-name">#icon-pptexe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pptx"></use>
                </svg>
                <div class="name">pptx</div>
                <div class="code-name">#icon-pptx</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-note"></use>
                </svg>
                <div class="name">note</div>
                <div class="code-name">#icon-note</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xlsx"></use>
                </svg>
                <div class="name">xlsx</div>
                <div class="code-name">#icon-xlsx</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-excel"></use>
                </svg>
                <div class="name">excel</div>
                <div class="code-name">#icon-excel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xls1"></use>
                </svg>
                <div class="name">xls</div>
                <div class="code-name">#icon-xls1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ppt"></use>
                </svg>
                <div class="name">ppt</div>
                <div class="code-name">#icon-ppt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-store"></use>
                </svg>
                <div class="name">store</div>
                <div class="code-name">#icon-store</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mind"></use>
                </svg>
                <div class="name">mind</div>
                <div class="code-name">#icon-mind</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mindexe"></use>
                </svg>
                <div class="name">mindexe</div>
                <div class="code-name">#icon-mindexe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setup"></use>
                </svg>
                <div class="name">setup</div>
                <div class="code-name">#icon-setup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#icon-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favorite"></use>
                </svg>
                <div class="name">favorite</div>
                <div class="code-name">#icon-favorite</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cut"></use>
                </svg>
                <div class="name">cut</div>
                <div class="code-name">#icon-cut</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baiban"></use>
                </svg>
                <div class="name">baiban</div>
                <div class="code-name">#icon-baiban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notice"></use>
                </svg>
                <div class="name">notice</div>
                <div class="code-name">#icon-notice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-windows"></use>
                </svg>
                <div class="name">windows</div>
                <div class="code-name">#icon-windows</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
